<template>
  <view class="textContainer">
    <view class="textTitle spaceBetween">
      <view style="display: flex; align-items: center">
        <view class="titleFlag"></view><text>{{ title }}</text>
      </view>
      <view class="morePos" @click="onClickMoreJob()"
        ><span class="styleTextMoreJob">更多职位</span>
        <img class="styleImageMoreJob" :src="arrowRight" />
      </view>
    </view>
    <view class="textContent" v-if="commendPosition.length > 0">
      <view
        class="positionCard"
        v-for="item in commendPosition"
        :key="item.id"
        @click="onClickJob(item.id)"
      >
        <view class="cardTitle">
          <view class="styleTextTitle">{{ item.jtzw }}</view>
          <view class="salary">{{ item.xzdy }}</view>
        </view>
        <view class="cardDesc">
          <view class="descItem"
            ><img :src="srcEducation" /><text>{{
              item.school || "不限"
            }}</text></view
          >
          <view class="descItem"
            ><img :src="srcExperience" /><text>{{ item.gznum }}</text
            ><img
              :src="srcLocation"
              style="margin-left: 40rpx"
              v-if="item.regionname != ''"
          /></view>
          <view class="f1">{{ item.regionname }}</view>
        </view>
        <view v-if="item.fldy.length > 0" class="tips">
          <view class="tipsItem" v-for="tip in item.fldy" :key="tip">{{
            tip
          }}</view>
        </view>
        <view class="address">
          <view class="addressLeft">
            <img :src="item.logo" mode="aspectFill" />
            <text>{{ item.cname_all }}</text
            >{{ item.leader ? `(${item.leader})` : "" }}
          </view>
          <text>{{ item.yuangong }}</text>
        </view>
      </view>
    </view>
    <view v-else class="emptyLoading">
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
  </view>
</template>
<script>
import Empty from "@/components/Empty.vue";
import { getLayerDetailsData } from "@/api/modules/career";
export default {
  props: {
    jobName: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    positionId: {
      type: String,
      default: "",
    },
    layerId: {
      type: String,
      default: null,
    },
  },
  components: {
    Empty,
  },
  data() {
    return {
      loading: false,
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      commendPosition: [],
      arrowRight:
        this.$imgBaseSelf + "career/positionDictionary/job_detail_more_job.png",
      srcEducation:
        this.$imgBaseSelf +
        "career/positionDictionary/job_detail_recommend_job_education.png",
      srcExperience:
        this.$imgBaseSelf +
        "career/positionDictionary/job_detail_recommend_job_experience.png",
      srcLocation:
        this.$imgBaseSelf +
        "career/positionDictionary/job_detail_recommend_job_location.png",
      moreJobName: "",
    };
  },
  mounted() {
    this.getLayerDetail();
  },
  methods: {
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      console.log("getRecommendJobs", this.jobName);
      const params = {
        id: this.positionId,
        layerIds: this.layerId,
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.commendPosition = res.data[0].children[0].children[0].data;
            this.moreJobName =
              res.data[0].children[0].children[0].data[0].searchPositionName;
          } else {
            console.log("请求失败");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onClickJob(id) {
      uni.navigateTo({
        url: "/pagesSub/public/jobDetail/index?jobId=" + id + "&positionId=" + this.positionId,
      });
    },
    onClickMoreJob() {
      console.log("onClickMoreJob", this.jobName);
      uni.navigateTo({
        url:
          "/pagesSub/career/morePositions/index?positionId=" + this.positionId,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.textContainer {
  margin: 24rpx 32rpx 0 32rpx;
  padding: 40rpx 34rpx 44rpx 34rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .spaceBetween {
    justify-content: space-between;
  }

  .textTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .morePos {
      display: flex;
      flex-direction: row;
      align-items: center;

      .styleTextMoreJob {
        color: #999999;
        font-size: 24rpx;
        font-weight: 300;
      }

      .styleImageMoreJob {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .textContent {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 48rpx;
    white-space: pre-wrap;
    overflow: hidden;
    margin-top: 22rpx;

    .positionCard {
      padding: 32rpx 0;
      border-radius: 30rpx;

      & ~ .positionCard {
        border-top: 2rpx solid #f4f4f4;
        padding-bottom: 0;
      }

      .cardTitle {
        font-size: 36rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #222222;
        display: flex;
        justify-content: space-between;

        .styleTextTitle {
          flex:1;
          width:0;
          max-height:400rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .salary {
          font-size: 32rpx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #f75a3e;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }

      .cardDesc {
        display: flex;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #555555;
        white-space: nowrap;
        margin-top: 10rpx;

        img {
          width: 24rpx;
          height: 24rpx;
          margin-right: 6rpx;
          left: 0;
        }

        .descItem {
          display: flex;
          align-items: center;
        }

        .descItem ~ .descItem {
          margin-left: 40rpx;
        }

        .f1 {
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .tips {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;

        .tipsItem {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #555555;
          padding: 6rpx 12rpx 8rpx 12rpx;
          background: #f7f7f9;
          border-radius: 8rpx;
          margin-right: 16rpx;
          overflow: hidden;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          // margin-top: 20rpx;
        }
      }

      .address {
        display: flex;
        margin-top: 30rpx;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;

        .addressLeft {
          display: flex;
          align-items: center;

          text {
            max-width: 300rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 30rpx;
          }

          img {
            width: 70rpx;
            height: 41.5rpx;
            border-radius: 10rpx;
            border: 1rpx solid #d9d9d9;
          }
        }
      }
    }
  }
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
